<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>添加管理员信息</legend>
</fieldset>
<form action="" class="layui-form" id="form-admin">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="text_align:center;">管理员名</label>
            <div class="layui-input-inline">
                <!--                <input type="hidden" name="op" value="add" autocomplete="off" class="layui-input">-->
                <input class="layui-input" lay-verify="aname" name="aname" type="text" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="text_align:center;">密码</label>
            <div class="layui-input-inline">
                <!--                <input type="hidden" name="op" value="add" autocomplete="off" class="layui-input">-->
                <input class="layui-input" lay-verify="apwd" name="apwd" type="text" autocomplete="off">
            </div>
        </div>


        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input class="layui-input" lay-verify="required|phone" name="atel" type="tel" autocomplete="off">
            </div>
        </div>


    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select name="role">
                    <option value="超级管理员">超级管理员</option>
                    <option value="普通管理员" selected="">普通管理员</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="asex" value="男" title="男" checked="">
                <input type="radio" name="asex" value="女" title="女">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="add" lay-submit="" type="submit" lay-event="add">立即提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>
    </div>
</form>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-xs" lay-event="update">修改状态</a>
</script>


<!--<script charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.js"></script>-->
<script charset="utf-8" src="../layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/ajax.js"></script>
<script>



    layui.use(function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.jquery;
        $(function () {
            showAll();
        });


        function showAll() {


            layui.jquery.ajax({
                url: "../../admin?op=findall",
                type: "GET",
                dataType: "json",
                success: function (res) {
                    table.render({
                        elem: '#test'
                        , title: '管理员数据表'
                        , cols: [[
                            {type: 'checkbox', fixed: 'left'}
                            , {field: 'ano', width: 80, title: 'ID', fixed: 'left', unresize: 'true', sort: true}
                            , {field: 'aname', width: 120, title: '用户名', edit: 'text'}
                            , {field: 'apwd', title: '密码', edit: 'text'}
                            , {
                                field: 'atel', width: 200, title: '手机号', edit: 'text', templet: function (res) {
                                    return '<em>' + res.atel + '</em>'
                                }
                            }
                            , {field: 'role', width: 120, title: '角色', edit: 'text'}
                            /*则返回一个参数 res（包含当前行数据及特定的额外字段）*/
                            , {
                                field: 'astate', title: '状态', templet: function (res) {
                                    if (res.astate === 1) {
                                        return '<span style="color: #008000">正常</span>';
                                    } else {
                                        return '<span style="color: #dcdcdc">冻结</span>';
                                    }
                                }
                            }
                            , {field: 'right', width: 150, title: '操作', toolbar: '#barDemo'}
                        ]],
                        data: res.data,
                        count: res.data.length,
                        page: {
                            limit: 10, // 每页显示的数据量
                            limits: [10, 20, 30], // 可选的数据量选项
                        },
                    });
                }
            });
        }





        form.on('submit(add)', function(data){
            var obj = JSON.stringify(data.field);
            $.post("../../admin?op=add",data.field,function(rs){
                console.log(rs);
                if(rs == 1){
                    //重置表单
                    $("#form-admin")[0].reset();
                   showAll();//修改成功后，需要重新加载表格中数据
                }else{
                    layer.msg(rs.msg);
                }
            },"json");
            return false;//阻止表单提交，采用ajax提交
        });




        table.on('tool(test)', function (obj) {
            var data = obj.data;
            // 发送请求到后端，修改状态
            console.log(obj.event);
            console.log(data);
            if (obj.event === 'update') {
                $.get("../../admin?op=update", {ano: data.ano, astate: data.astate}, function (rs) {
                    console.log(rs.code);
                    if (rs === 1) {
                        showAll(); // 修改成功后，重新加载表格中的数据
                    } else {
                        layer.msg(rs.msg);
                    }
                }, 'json');
            }
        });

        //自定义验证规则
        form.verify({
            aname: function (value) {
                if (value.length < 2) {
                    return '账号至少得2个字符！';
                }
                //发送到后台，当前账号是否已添加
            },
            apwd: function (value) {
                if (value.length < 6) {
                    return '密码至少得6位数！';
                }
                //发送到后台，当前账号是否已添加
            }
        });


    });

</script>
</body>
</html>
